How to achieve cross-domain between ThinkPHP and Vue

In modern web development, front-end and back-end separation is an increasingly common development model. Since the front-end uses the Vue framework and the back-end is built using the ThinkPHP framework, cross-domain issues are inevitable. This article will introduce how to achieve cross-domain between ThinkPHP and Vue.

1. Cross-domain issues in Vue

Vue is a modern JavaScript framework for building user interfaces. Since Vue is a single-page application, the browser only needs to cross domain when fetching data on the server where the Vue component is located. When we send an Ajax request using Vue, the browser will check if the request is from the same domain. If not, a cross-domain request is made.

2. Cross-domain issues in ThinkPHP

ThinkPHP is a powerful open source PHP framework that is widely used in Web development. In ThinkPHP, cross-domain requests are prohibited by default. If you want to implement cross-domain in ThinkPHP, you need to do some configuration.

3. Solve cross-domain problems

In Vue, we can solve cross-domain problems by setting the headers of the axios library, as shown below:

import axios from 'axios'
axios.defaults.baseURL = 'http://example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/json';

In ThinkPHP , we can add the following code in the Controller:

header('Access-Control-Allow-Origin: * ');
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

The above code will add the corresponding header information to allow all cross-domain requests.

We can also have more detailed control, for example:

header('Access-Control-Allow-Origin: http://example.com');
header('Access-Control-Allow-Methods: GET,POST,PUT,DELETE');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');

This code will allow cross-domain requests from http://example.com.

4. Nginx reverse proxy solves cross-domain issues

If you need to use Nginx as a reverse proxy between Vue and ThinkPHP, you can use the following configuration file:

location / {
        proxy_pass http://backend/;
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept' always;
    }

The above configuration will allow Vue to send cross-domain requests. Among them, 'Access-Control-Allow-Origin' allows requests from all domains. If we want further security control, we can change it to allow requests from specific domains.

5. Summary

Through the analysis and solution of cross-domain problems in Vue and ThinkPHP, we can find that cross-domain problems are not unsolvable problems. During development, we can flexibly use common cross-domain solutions, and we can also perform more detailed control according to actual needs. If you encounter cross-domain problems during development, you may wish to refer to this article, I hope it will be helpful to you.

The above is the detailed content of How to achieve cross-domain between ThinkPHP and Vue. For more information, please follow other related articles on the PHP Chinese website!